<%@ page language="java" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh-CN">
<head>
<%@include file="/WEB-INF/views/commons/common.jsp"%>
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/font-awesome/4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/webuploader/0.1.5/webuploader.css">

<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/form-theme.css">

<title>新增图书纠错信息</title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="350">

	<div class="main-wrap">

		<!-- 工具条 start-->
		<div class="container-fluid form-body-header">
			<div class="container">
				<div class="row tool-bar">
					<div class="col-xs-12">
<!-- 						<button type="button" class="btn btn-sm tool-btn" id="saveBtn">保存</button> -->
						<button type="button" class="btn btn-sm tool-btn" id="submitBtn">提交</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 工具条 end-->
		
		<!-- modal框start -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">确认提交框</h4>
					</div>
					<form id="form_data">
						<div class="modal-body">
						</div>
						<div class="modal-footer">
<!-- 							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
<!-- 							<button type="button" onclick="submitInfo()" class="btn btn-primary">关闭本页面</button> -->
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
		</div>
		<!-- modal框end -->

		<!-- 表单 start-->
		<div class="container-fluid">
			<form id="form">
			
				<input type="hidden" name="question.quesId" value="${form.question.quesId }" />
				<input type="hidden" name="errorQuesAttach.quesId" value="${form.errorQuesAttach.quesId }" />
				
				<div class="container form-body-div">
					<div class="row text-center title-body" id="baseinfo">
						贺银成老师系列图书纠错收集页面<br/>
					</div>
					<div class="row pannel-title">
						<span>联系方式</span> <a href="javascript:void(0);" class="hide-next-btn">收起</a>
					</div>
					<div class="row pannel-body">
						<table class="form-table">
							<tr>
								<th class="col-xs-2 ">姓名</th>
								<td class="col-xs-4" >
									<input type="text" class="form-control validate[required]" 
										data-errormessage-value-missing="请填写姓名"
										name="errorQuesAttach.submitterName" value="${form.errorQuesAttach.submitterName}" />
								</td>
								<th class="col-xs-2 ">手机号</th>
								<td class="col-xs-4" >
									<input type="text" class="form-control validate[required,funcCallRequired[mobile]]" 
										data-errormessage-value-missing="请填写手机号"
										name="errorQuesAttach.mobilePhone" value="${form.errorQuesAttach.mobilePhone}" />
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">电子邮箱</th>
								<td class="col-xs-4">
									<input type="text" class="form-control validate[required,funcCallRequired[email]]" 
										data-errormessage-value-missing="请填写电子邮箱"
										name="errorQuesAttach.email" value="${form.errorQuesAttach.email}" />
								</td>
								
								<th class="col-xs-2 ">支付宝账号</th>
								<td class="col-xs-4">
									<input type="text" class="form-control validate[required]" 
										data-errormessage-value-missing="请填写支付宝账号"
										name="errorQuesAttach.alipayNum" value="${form.errorQuesAttach.alipayNum}" />
								</td>
							</tr>
						</table>
					</div>
					
					<div class="row pannel-title">
						<span id="errorinfo">纠错信息</span> <a href="javascript:void(0);"
							class="hide-next-btn">收起</a>
					</div>
					<div class="row pannel-body">
						<table class="form-table">
							<tr>
								<th class="col-xs-2 ">考试类别</th>
								<td class="col-xs-4">
									<select name="question.bookClass" class="form-control validate[required]">
										<option value="">请选择</option>
										<c:forEach items="${quesBookClasses}" var="state">
											<option value="${state.code}" <c:if test="${state.code eq form.question.bookClass}">selected="selected"</c:if>>${state.value}</option>
										</c:forEach> 
									</select>
								</td>
								
								<th class="col-xs-2 ">图书名称</th>
								<td class="col-xs-4">
									<select name="question.bookSecClass" class="form-control validate[required]">
										<option value="" selected="selected">请选择</option>
										<c:if test="${form.question.bookClass eq '1'}">
											<c:forEach items="${quesBookClasses1}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.question.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.question.bookClass eq '2'}">
											<c:forEach items="${quesBookClasses2}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.question.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.question.bookClass eq '3'}">
											<c:forEach items="${quesBookClasses3}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.question.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
										<c:if test="${form.question.bookClass eq '4'}">
											<c:forEach items="${quesBookClasses4}" var="dic">
											<option value="${dic.code}" <c:if test="${dic.code eq form.question.bookSecClass}">selected="selected"</c:if>>${dic.value}</option>
										</c:forEach> 
										</c:if>
									</select>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">图书页码</th>
								<td class="col-xs-4">
									<input type="text" class="form-control validate[required,funcCallRequired[isInt4]]" 
										data-errormessage-value-missing="请填写图书页码"
										name="question.pageNum" value="${form.question.pageNum}" />
								</td>
								<th class="col-xs-2 "></th>
								<td class="col-xs-4">
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题描述</th>
								<td class="col-xs-4" colspan="3">
									<textarea class="form-control validate[required,maxSize[1000]]" data-errormessage-value-missing="请填写问题描述"
										data-errormessage-range-overflow="问题描述长度不能超过1000个字" rows="10" name="question.quesDescribe" 
										placeholder="请详细描述您要提出的问题">${form.question.quesDescribe}</textarea>
								</td>
							</tr>
							<tr>
								<th class="col-xs-2 ">问题图片</th>
								<td class="col-xs-4" colspan="3">
									<button type="button" class="btn btn-sm tool-btn attach-upload">上传图片</button>
									<table data-ms-class="attachment"
										class="attach-no-table upload-download-element" data-show-upload-button=false
										data-title="上传附件" data-is-readonly=false data-box-id="${form.question.quesId }"
										>
									</table>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</form>
		</div>
		<!-- 表单 end-->
		
	</div>
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap/3.3.5/js/bootstrap.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/bootstrap-dialog3/js/bootstrap-dialog.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine-zh_CN.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/validation-engine/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/My97DatePicker/WdatePicker.js"></script>
	
	<script type="text/javascript" src="${base_href}/static/support/errorcorrection/correction.js"></script>
	
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${base_href}/static/ui-frame/jquery-easyui/1.4.3/easyui.util.js"></script>
	
	<script type="text/javascript" src="${base_href}/static/ui-frame/webuploader/0.1.5/asp-upload-api.js"></script>
	
	<script type="text/javascript">

		
		function confirmRepeat(){
			var quesId = $("input[name='question.quesId']").val();
			$.ajax({
				url : basePath + "/external/errorCorrection/confirmRepeat.json?quesId="+quesId,
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function() {
					if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
						window.location.href="about:blank";
						window.close();
					} else {
						window.opener = null;
						window.open("", "_self");
						window.close();
					}
				}
			})
			
		}
		
		function closeWin(){
			var quesId = $("input[name='question.quesId']").val();
			$.ajax({
				url : basePath + "/external/errorCorrection/confirmSubmit.json?quesId="+quesId,
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function() {
					if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
						window.location.href="about:blank";
						window.close();
					} else {
						window.opener = null;
						window.open("", "_self");
						window.close();
					}
				}
			})
		}
		$(function() {
			$('#form').validationEngine('attach', {
				maxErrorsPerField : 1,
				scroll : false,
				validationEventTrigger : "keyup blur change focus",
				ValidateNoneVisibleFields : true,//验证隐藏域
				promptPosition : "topRight" //验证弹出框的位置，topRight,topLeft,bottomRight,bottomLeft,centerRight,centerLeft,inline
			});

			$("#submitBtn").click(
					function() {
						$('a.hide-next-btn-show').each(function(i, val) {$(this).click();});
						if ($('#form').validationEngine('validate')) {
							
							if($('.attach-no-table').find("img").length == 0){
								BootstrapDialog.alert("请上传错误相关图片");
								return;
							}
							return $.post(
										basePath+ "/external/errorCorrection/saveQuestion.json",
										$("#form").serialize(),
										function(r) {
												var quesId = r.errorQuestion.question.quesId;
												var bookClass = r.errorQuestion.question.bookClass;
												var bookSecClass = r.errorQuestion.question.bookSecClass;
												var pageNum = r.errorQuestion.question.pageNum;
												$.ajax({
													url : basePath + "/external/errorCorrection/queryRepeatQues.json",
													data:{'quesId':quesId,'bookClass':bookClass,'bookSecClass':bookSecClass,'pageNum':pageNum},
													type : "get",
													async : false, //不可异步,必须同步
													dataType : "json",
													success : function(r) {
														if(r.length == 0){
															var str = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图书纠错案例我们已经收到。若该案例审核后确为图书内容有误且您为首位指出该问题的同学，则我们会通过电子邮件向您反馈我们的审核结果并且对您所提供的支付宝帐号转账10元以表感谢！</br>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;祝您复习顺利，考上自己理想的学校！";
															$(".modal-body").html(str);
															
															var footHtml = '<button type="button" onclick="closeWin()" class="btn-sm tool-btn">提交并关闭本页面</button>';
															$(".modal-footer").empty();
															$(".modal-footer").html(footHtml);
															$('#myModal').modal({
																backdrop: 'static',
																keyboard: false
															});
															$('#myModal').modal('show');
														}else{
															var name = $("input[name='errorQuesAttach.submitterName']").val();
															var str = name+"同学：</br>"+
																"&nbsp;&nbsp;&nbsp;&nbsp;我们根据您提交的图书纠错信息，发现在"+r[0].bookSecClassName+"第"+r[0].pageNum+"页已经有其他同学提交的图书纠错信息，请您查看并确认您所提交的图书纠错信息是否已经有其他同学提交。";
															var html = '<table class="form-table">'+
																			'<tr>'+
																				'<th class="col-xs-2 " colspan="4">'+str+'</th>'+
																				'</tr>'+
																				'<tr>'+
																				'<th class="col-xs-2 ">图书名称</th>'+
																				'<td class="col-xs-4">'+
																					r[0].bookSecClassName+
																				'</td>'+
																				'<th class="col-xs-2 ">图书页码</th>'+
																				'<td class="col-xs-4">'+
																					r[0].pageNum+
																				'</td>'+
																			'</tr>';
															for(var k=0;k<r.length;k++){
																html = html+
																'<tr>'+
																	'<th class="col-xs-2 " rowspan="2">图书纠错内容</th>'+
																	'<td class="col-xs-4" colspan="3">'+
																		'<div class="pre-div">'+r[k].quesDescribe+'</div>'+
																	'</td>'+
																'</tr>'+
																'<tr>'+
																	'<td class="col-xs-4"  colspan="3">'+
																		'<span style="float:right">'+
																			'提问时间：'+r[k].quesTime+
																		'</span>'+
																	'</td>'+
																'</tr>'+
																'<tr>'+
																	'<th class="col-xs-2 " rowspan="2">教师回复</th>'+
																	'<td class="col-xs-4" colspan="3">'+
																		'<div class="pre-div">'+r[k].myAnwser+'</div>'+
																	'</td>'+
																'</tr>'+
																'<tr>'+
																	'<td class="col-xs-4"  colspan="3">'+
																		'<span style="float:right">'+
																			'回复时间：'+r[k].replyTime+
																		'</span>'+
																	'</td>'+
																'</tr>';
															}
															html = html+'</table>';
															$(".modal-body").html(html);
															
															var footHtml = '<button type="button" onclick="closeWin()" class="btn-sm tool-btn" >继续提交</button>'+
																		'<button type="button" onclick="confirmRepeat()" class="btn-sm tool-btn">我的纠错已有人提交</button>';
															$(".modal-footer").empty();
															$(".modal-footer").html(footHtml);
															$('#myModal').modal({
																backdrop: 'static',
																keyboard: false
															});
															$('#myModal').modal('show');
														}
													}
												})
										}, 'json');
						} else {
							return $.Deferred().reject('validatefail');
						}
					});
			
			$(".attach-upload").click(function() {
				$(this).next().uploaddownload();
			});

			var quesBookClasses1;
			var quesBookClasses2;
			var quesBookClasses3;
			var quesBookClasses4;
			$.ajax({
				url : basePath + "/external/errorCorrection/getDicsByParam.json?model=ques_book_class_1",
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function(r) {
					quesBookClasses1 = r;
				}
			})
			$.ajax({
				url : basePath + "/external/errorCorrection/getDicsByParam.json?model=ques_book_class_2",
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function(r) {
					quesBookClasses2 = r;
				}
			})
			$.ajax({
				url : basePath + "/external/errorCorrection/getDicsByParam.json?model=ques_book_class_3",
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function(r) {
					quesBookClasses3 = r;
				}
			})
			$.ajax({
				url : basePath + "/external/errorCorrection/getDicsByParam.json?model=ques_book_class_4",
				type : "get",
				async : false, //不可异步,必须同步
				dataType : "json",
				success : function(r) {
					quesBookClasses4 = r;
				}
			})

			$("select[name='question.bookClass']").change(
				function() {
					var checkText = $(this).find("option:selected").text();
					var checkValue = $(this).val();
					if (checkValue == undefined || checkValue == null || checkValue == "") {
						$("select[name='question.bookSecClass']").empty();
						$("select[name='question.bookSecClass']").find("option").remove();
						return;
					}
					if (checkValue == 1) {
						$("select[name='question.bookSecClass']").empty();
						$("select[name='question.bookSecClass']").find("option").remove();

						for (var k = 0; k < quesBookClasses1.length; k++) {
							var option = "<option value='"+quesBookClasses1[k].code+"'>"
									+ quesBookClasses1[k].value
									+ "</option>";
							$("select[name='question.bookSecClass']").append(option);
						}
					}
					if (checkValue == 2) {
						$("select[name='question.bookSecClass']").empty();
						$("select[name='question.bookSecClass']").find("option").remove();
						for (var k = 0; k < quesBookClasses2.length; k++) {
							var option = "<option value='"+quesBookClasses2[k].code+"'>"
									+ quesBookClasses2[k].value
									+ "</option>";
							$("select[name='question.bookSecClass']").append(option);
						}
					}
					if (checkValue == 3) {
						$("select[name='question.bookSecClass']").empty();
						$("select[name='question.bookSecClass']").find("option").remove();
						for (var k = 0; k < quesBookClasses3.length; k++) {
							var option = "<option value='"+quesBookClasses3[k].code+"'>"
									+ quesBookClasses3[k].value
									+ "</option>";
							$("select[name='question.bookSecClass']").append(option);
						}
					}
					if (checkValue == 4) {
						$("select[name='question.bookSecClass']").empty();
						$("select[name='question.bookSecClass']").find("option").remove();
						for (var k = 0; k < quesBookClasses4.length; k++) {
							var option = "<option value='"+quesBookClasses4[k].code+"'>"
									+ quesBookClasses4[k].value
									+ "</option>";
							$("select[name='question.bookSecClass']").append(option);
						}
					}
				});
		});
	</script>
</body>
</html>
